<template>
	<view class="page-content p-l-18 p-r-18 p-t-10">
		<view class="bg_678 bor-rad19 c_fff p-t-20 p-b-20 text-center">
			<view class="fz-14">抢单结束倒计时</view>
			<view class="fz-50 view flex-row justify-between p-l-27 p-r-27">
				<view class="">35</view>
				<view class="view justify-center m-l-16 m-r-16">
					<view class="w8 h8 bor-rad8 bg_fff"></view>
					<view class="w8 h8 bor-rad8 bg_fff m-t-8"></view>
				</view>
				<view class="">08</view>
				<view class="view justify-center m-l-16 m-r-16">
					<view class="w8 h8 bor-rad8 bg_fff"></view>
					<view class="w8 h8 bor-rad8 bg_fff m-t-8"></view>
				</view>
				<view class="">22</view>
			</view>
			<view class="view flex-row justify-between fz-12 c_a1b p-l-27 p-r-27">
				<view class="w63">DAYS</view>
				<view class="w63">HOURS</view>
				<view class="w63">MINUTES</view>
			</view>
			<view class="fz-14 c_4e6 text-center m-t-2">COMING SOON</view>
		</view>
		<view class="bor-rad19 m-t-10 b-s-1 bg_fff">
			<view class="c_fff view flex-row justify-between p-l-11 p-t-20 p-r-13 p-b-17">
				<view class="view flex-row fz-43">
					<view class="w46 h46 m-r-11"></view>
					<view class="m-t-2">
						<view class="fz-14 c_0a1">星火F-13期11点场</view>
						<view class="view flex-row m-t-9">
							<view class="fz-12 c_cfd">限量1000份</view>
							<view class="w12 h15 m-l-6"></view>
							<view class="w12 h15 m-l-3"></view>
							<view class="w12 h15 m-l-3"></view>
						</view>
					</view>
				</view>
				<view class="fz-12 m-t-3">
					<view class="c_101">参与金额</view>
					<view class="m-t-10 c_608">1-500CHB</view>
				</view>
			</view>
			<view class="p-l-13 p-r-13 view flex-row justify-between">
				<view class="view flex-row">
					<view class="w4 h1 m-r-2" style="border-top: 1px solid #979797;"></view>
					<view class="w4 h1" style="border-top: 1px solid #979797;"></view>
				</view>
				<view class="view flex-row">
					<view class="w4 h1 m-r-2" style="border-top: 1px solid #979797;"></view>
					<view class="w4 h1" style="border-top: 1px solid #979797;"></view>
				</view>
			</view>
			<view class="p-l-13 p-r-13 p-b-16 m-t-15">
				<view class="view flex-row justify-between">
					<view class="c_949 fz-12">当前奖励池数量</view>
					<view class="c_949 fz-14">3.14159</view>
				</view>
				<view class="view flex-row justify-between m-t-11">
					<view class="c_949 fz-12">当前奖励池数量</view>
					<view class="c_949 fz-14">3.14159</view>
				</view>
			</view>
		</view>
		<view class="p-l-6 p-r-6 p-t-11">
			<view class="c_748 fz-14">参与数量</view>
			<view class="m-t-8 fz-12 c_949">请选择你要参与抢单的数量，也可以自定义进行输入</view>
			<view class="view flex-row flex-wrap m-t-5">
				<view class="view align-center bor-rad50 justify-center h43 fz-12 m-t-10 bg_e7e c_678" style="width: calc((100% - 10px) / 3)">500CHB</view>
				<view class="view align-center bor-rad50 justify-center h43 fz-12 m-t-10 bg_e7e c_678 m-l-5" style="width: calc((100% - 10px) / 3)">500CHB</view>
				<view class="view align-center bor-rad50 justify-center h43 fz-12 m-t-10 bg_e7e c_678 m-l-5" style="width: calc((100% - 10px) / 3)">500CHB</view>
				<view class="view align-center bor-rad50 justify-center h43 fz-12 m-t-10 bg_e7e c_678" style="width: calc((100% - 10px) / 3)">500CHB</view>
				<view class="view align-center bor-rad50 justify-center h43 fz-12 m-t-10 bg_e7e c_678 m-l-5" style="width: calc((100% - 10px) / 3)">自定义</view>
			</view>
			<view class="fz-12 c_949 m-t-12">请输入您的参与数量</view>
			<view class="m-t-15">
				<input class="fz-12 c_949 p-b-12 p-t-12" style="border-bottom: 1px solid #D1D4E8;" type="number" v-model="num" @input="onInputChange" placeholder="可用数量" />
			</view>
			<view class="fz-12 c_949 m-t-12">CHB数量(XX的2%)：{{maxNum}}CHB</view>
			<view class="fz-12 c_949 m-t-13">可用数量</view>
		</view>
		<button @click="onConfrimClick" class="bg_678 width100 h46 bor-rad12 view flex-row align-center justify-center c_fff fz-16 m-t-10" :loading="btnLoading">{{btnLoading ? '' : '确定'}}</button>
	</view>
</template>
<script>
export default {
  data() {
    return {
		num: '',
		maxNum: 5.9858,
		btnLoading: false
	}
  },
  methods: {
	  onInputChange(e) {
		  if (e.detail.value) {
			  this.$nextTick(() => {
				  let val = Math.abs(Number(e.detail.value))
				  if (val > this.maxNum) {
					  val = this.maxNum
				  }
			  	this.num = val.toString()
			  })
		  }
	  },
	  onConfrimClick() {}
  }
}
</script>
<style lang="scss" scoped>
page {
	background-color:#F6F6F6;
	box-sizing: border-box;
	overflow-y: hidden;
}
</style>